<template>
	<view >
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">辉哥餐食后台管理</block>
			<block slot="right">添加</block>
		</cu-custom>
		
		
		<view>
			<scroll-view scroll-x  class="nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="item.i==search.week?'text-green cur':''" v-for="(item,index) in week" :key="index" @tap="tabSelect" :data-id="item.i">
					{{item.value}}
				</view>
			</scroll-view>
		</view>
		<view>
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="true" v-model="search.name" type="text" placeholder="搜索菜名" confirm-type="search"></input>
				</view>
				<view class="action" @tap="showModal" data-target="RadioModal">
					<text>{{search.type=='all'?'所有':search.type=='mid'?'上午':'下午'}}</text>
					<text class="cuIcon-triangledownfill"></text>
				</view>
			</view>
		</view>
		<view>
			<view  class="cu-list menu-avatar">
				<view hover-stop-propagation="true"  class="cu-item" :class="tabcurName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in footlist" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view hover-stop-propagation=true class="cu-avatar round lg" :style="[{backgroundImage:'url(https://gitee.com/y19y/learning_notes/raw/master/' + (item.nutritionType == 'meat' ? '1684140' : '2661691') + '.jpg)' }]"></view>
					<view class="content" :class="item.nutritionType == 'meat' ? 'text-red' :'text-green'" >
						<view >{{item.name}}</view>
						<view class=" text-sm">
							<text :class="item.nutritionType == 'meat' ? 'text-red' :'text-green'" class="cuIcon-loading   margin-right-xs"></text> {{item.nutritionType == "meat" ?"肉食" : "素食"}}</view>
					</view>
					<view class="action">
						<view class="text-black text-xs">{{item.week.value}}</view>
						<view :class="item.type == 'mid' ? 'bg-red' :'bg-blue'" class="text-black cu-tag round sm">{{item.type=="mid"?'上午':'下午'}}</view>
					</view>
					<view class="move">
						<view class="bg-red" @tap="removeFoot(item)">删除</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="RadioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">所有</view>
								<radio class="round" :class="search.type== 'all'?'checked':''" :checked="search.type=='all'?true:false"
								 value="all"></radio>
							</label>
						</view>
						<view class="cu-item" >
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">上午</view>
								<radio class="round" :class="search.type=='mid'?'checked':''" :checked="search.type=='mid'?true:false"
								 value="mid"></radio>
							</label>
						</view>
						<view class="cu-item" >
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">下午</view>
								<radio class="round" :class="search.type=='lat'?'checked':''" :checked="search.type=='lat'?true:false"
								 value="lat"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		
	</view>
</template>

<script>
	import * as footUtil from 'js/foot.js';
	export default {
		data() {
			let footlist = [];
			return {
				week: this.week,
				ColorList: this.ColorList,
				scrollLeft: 0,
				listTouchStart: 0,
				listTouchDirection: null,
				modalName: null,
				footlist,
				tabcurName: null,
				search:{
					name:'',
					type:'all',
					week:null,
				},
			}
		},
		mounted() {
			this.getFoot();
		},
		methods: {
			tabSelect(e) {
				this.search.week = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.tabcurName = e.currentTarget.dataset.target
				} else {
					this.tabcurName = null
				}
				this.listTouchDirection = null
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange(e) {
				this.$data.search.type = e.detail.value;
			},
			getFoot() {
				this.$data.footlist = footUtil.showFoot(this.$data.search);
			},
			removeFoot(e) {
				console.log(e);
				footUtil.removeFoot(e);
				this.getFoot();
			},
		},
		watch:{
			'search.name': function(){
				this.getFoot();
			},
			'search.type': function(){
				this.getFoot();
			},
			'search.week': function(){
				this.getFoot();
			}
		}
	}
</script>

<style>
</style>
